|
Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami
autor: Dariusz Majgier •
ostatnia aktualizacja kursu: 2003.06.01
|
[Start] •
[Elementy HTML] •
[Atrybuty HTML] •
[Style CSS] •
[Porady online]
[A]
[B]
[C]
[D]
[E]
[F]
[H]
[I]
[K]
[L]
[M]
[N]
[O]
[P]
[Q]
[R]
[S]
[T]
[U]
[V]
[W]
[Z]
[kolory] •
[tekst] •
[czcionki] •
[rozmiary] •
[pozycje] •
[tabele] •
[listy] •
[formularze]
[struktura] •
[linki] •
[multimedia] •
[bloki] •
[obramowania] •
[t│a] •
[synteza] •
[druk]
display
Styl definiuje spos≤b wy╢wietlania/interpretowania elementu.
Warto╢ci:
- • block (warto╢µ domy╢lna) - CSS1 / IE5, N4, O3.5
- tworzy element blokowy
- • inline - CSS1 / IE5, N6, O3.5
- tworzy element liniowy
- • list-item - CSS1 / IE6, N4, O4
- tworzy listΩ
- • none - CSS1 / IE4, N4, O3.5
- ukrywa element
- • compact - CSS2 / O4
- tworzy zagΩszczony akapit bez odstΩp≤w
- • run-in - CSS2 / O4
- tworzy element liniowy, je┐eli nastΩpny jest element blokowy
- • marker - CSS2 / O4
- tworzy marker
- • table-header-group - CSS2 / IE5, N6, O4
- tworzy nag│≤wek tabeli
- • table-footer-group - CSS2 / IE5, N6, O4
- tworzy stopkΩ tabeli
- • table - CSS2 / N6, O4
- tworzy tabelΩ
- • inline-table - CSS2 / O4
- tworzy tabelΩ
- • table-caption - CSS2 / N6, O4
- tworzy podpis tabeli
- • table-cell - CSS2 / N6, O4
- tworzy kom≤rkΩ tabeli
- • table-row - CSS2 / N6, O4
- tworzy rz▒d tabeli
- • table-row-group - CSS2 / N6, O4
- tworzy grupΩ rzΩd≤w tabeli
- • table-column - CSS2 / N6, O4
- tworzy kolumnΩ tabeli
- • table-column-group - CSS2 / N6, O4
- tworzy grupΩ kolumn tabeli
- • inherit - CSS2 / N6
- przejΩcie warto╢ci "rodzica", np. display:inherit;
Pozosta│e cechy:
• CSS/przegl▒darki: CSS1 / IE4, N4, O3.5
Przyk│adowe zastosowania:
• Przyk│ad 1:
<p style="display:inline;"> akapity przekszta│cone s▒ w zwyk│e</p>
<p style="display:inline;"> elementy liniowe, co spowodowa│o </p>
<p style="display:inline;"> wy╢wietlenie tekstu w jednej linii</p>
akapity przekszta│cone s▒ w zwyk│e
elementy liniowe, co spowodowa│o
wy╢wietlenie tekstu w jednej linii
• Przyk│ad 2:
dla odmiany elementy u (podkre╢lenia) zosta│y
<u style="display:block;"> zamienione na elementy blokowe </u>
<u style="display:block;"> i teraz przypominaj▒ w dzia│aniu </u>
<u style="display:block;"> elementy br (przej╢cie do nowej linii)</u>
dla odmiany elementy u (podkre╢lenia) zosta│y
zamienione na elementy blokowe
i teraz przypominaj▒ w dzia│aniu
elementy br (przej╢cie do nowej linii)
• Przyk│ad 3:
a gdyby tak z element≤w b (pogrubienie) zrobiµ listΩ? proszΩ:
<b style="display:list-item;"> pierwsza pozycja </b>
<b style="display:list-item;"> druga pozycja </b>
<b style="display:list-item;"> trzecia pozycja </b>
a gdyby tak z element≤w b (pogrubienie) zrobiµ listΩ? proszΩ:
pierwsza pozycja
druga pozycja
trzecia pozycja
• Przyk│ad 4:
tutaj powinien byµ napis, ale zosta│ ukryty:
<span style="display:none;">napis</span>
tutaj powinien byµ napis, ale zosta│ ukryty:
napis
• Przyk│ad 5:
Pierwsza linia tekstu
<u style="display:compact;">kolejna, wydzielona linia, kt≤ra teraz
jest akapitem, pozbawionym odstΩp≤w na dole i powy┐ej</u>
Ostatnia linijka tekstu
Pierwsza linia tekstu
kolejna, wydzielona linia, kt≤ra teraz
jest akapitem, pozbawionym odstΩp≤w na dole i powy┐ej
Ostatnia linijka tekstu
• Przyk│ad 6:
<p>To jest pierwszy akapit.</p>
<p style="display:run-in;">To jest drugi akapit jako "run-in",
czyli liniowy.</p>
<p>To jest trzeci akapit.</p>
To jest pierwszy akapit.
To jest drugi akapit jako "run-in",
czyli liniowy.
To jest trzeci akapit.
• Przyk│ad 7:
<style type="text/css"><!--
.ukryty {display:none;}
--></style>
• • •
Zobacz porady, skrypty, artyku│y i gotowe rozwi▒zania dla w│a╢cicieli stron WWW!
|